
<template>
  <div class="department-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <div>
            <!-- 按钮 -->
            <div class="btn-warp"> <el-button type="primary" @click="btnxingzeng">新增角色</el-button></div>
            <!-- 表格 -->
            <div class="one">

              <el-table
                :data="tableData"
                border
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="50"
                />
                <el-table-column
                  prop="name"
                  label="角色"
                  width="300"
                />
                <el-table-column
                  prop="description"
                  label="描述"
                />

                <el-table-column

                  label="操作"
                  width="400"
                >
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="oneSUNWEI(scope.row.id)">权限管理</el-button>
                    <el-button type="success" size="mini" @click="editRoleBtn(scope)">编辑按钮</el-button>
                    <el-button type="danger" size="mini" @click="deleteRole(scope.row.id)">删除按钮</el-button>

                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pagin-wrap ">
            <el-pagination

              :current-page.sync="form.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="form.pagesize"
              layout=" prev, pager, next ,total,sizes"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="isEdit?'编辑':'新增' "
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogClosBtn"
    >
      <el-form ref="formRef" :model="formDialog" :rules="rules" label-width="80px">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="formDialog.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="formDialog.description
            "
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ isEdit?'编辑':'新增' }}</el-button>
          <el-button @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分配权限弹出框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="dialogVisibleONE"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <AssignPermission v-if="dialogVisibleONE" :current-id="currentId" @close="dialogVisibleONE=false" />
    </el-dialog>
  </div>
</template>
<script>
import { getRoleLIST, PostRoleLIST, updataseTting, deldataseTting } from '@/api/settings'
import AssignPermission from '@/views/settings/assignPermission.vue'
// import _ from 'lodash'
export default {
  name: 'SettingCom',
  components: {
    AssignPermission
  },
  data() {
    return {
      activeName: 'first',
      tableData: [],
      form: {
        page: 1,
        pagesize: 100
      },
      dialogVisible: false,
      formDialog: {
        name: '',
        description: ''
      },
      total: 0,
      isEdit: false,
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      dialogVisibleONE: false,
      currentId: ''
    }
  },
  computed: {
    // 页数
    // 最大页码 就是总数除以每一页的有几个 就会得到多少页
    maxPageNum() {
      return Math.ceil(this.total / this.form.pagesize)
    },
    // 最后一页是否填满
    isLastPagFull() {
      // 总数除以每一页多少个,有余数就是么有填满,没有就是填满了
      return this.total % this.form.pagesize === 0
    }
  },
  // 就是页面一打开就要渲染的函数在里面写
  created() {
    // 获取所有角色列表的函数在此执行
    this.getsettingslist()
  },
  methods: {
    // 权限管理按钮
    oneSUNWEI(id) {
      this.dialogVisibleONE = true
      this.currentId = id
    },
    // 获取所有角色列表的axios步骤
    async getsettingslist() {
      try {
        const res = await getRoleLIST(this.form)
        console.log('获取所有角色列表', res)
        this.tableData = res.data?.rows
        this.total = res.data.total
      } catch (error) {
        console.log('获取信息失败')
      }
    },
    handleSizeChange(value) {
      // 每页显示天数的改变
      this.form.page = 1
      this.form.pagesize = value
      this.getsettingslist()

      console.log(value)
    },
    handleCurrentChange(value) {
      // 页码值的改变
      this.form.pag = value
      this.getsettingslist()
      console.log(value)
    },
    btnxingzeng() {
      this.dialogVisible = true
      this.isEdit = false
      // this.$options就是vue专门初始化载件 .data().formDialog就是去上面data()里面找到.formDialog里面将其修改为初始化
      this.formDialog = this.$options.data().formDialog
      // console.log(this.$options.data(), 'wwwwwwwww')
    },
    // 编辑的请求axios
    async upBianji() {
      try {
        const res = await updataseTting(this.formDialog)
        console.log(res)
        if (res.success) {
          this.dialogVisible = false
          this.getsettingslist()
        } else {
          this.$message.error('编辑出错')
        }
      } catch (error) {
        console.log('编辑请求错误', error)
      }
    },
    // 添加角色的的axios步骤
    async addList() {
      try {
        const res = await PostRoleLIST(this.formDialog)
        console.log(res)
        if (res.success) {
          // 添加成功自动跳转到最后一页
          // 如果最后一页满了应该将总页数加一,在跳转到下一页

          if (this.isLastPagFull) {
            this.form.page = this.maxPageNum + 1
            this.total++
          } else {
            this.form.page = this.maxPageNum
          }
          this.dialogVisible = false
          this.getsettingslist()
        } else {
          this.$$message.error('添加角色成功')
        }
      } catch (error) {
        console.log('添加请求报错', error)
      }
    },
    onSubmit() {
      this.$refs.formRef.validate(val => {
        if (this.isEdit) {
          this.upBianji()
        } else {
          this.addList()
        }
      })

      // this.dialogVisible = false
      // this.addList()
    },
    editRoleBtn(scope) {
      console.log(scope)
      // 打开模态框
      this.dialogVisible = true
      // 因为数据都准备好了,所以就不用发请求 可以直接获取
      this.formDialog.name = scope.row.name
      this.formDialog.description = scope.row.description

      // this.formDialog = _.cloneDeep(scope.row)

      this.isEdit = true
    },
    quxiao() {
      this.dialogVisible = false
    },
    dialogClosBtn() {
      console.log('失败校验', this.$options.data())
      this.$refs.formRef.resetFields()
      // 如果是编辑,就会清空数据变淡
      //  对它回显值，进行单独的情况，初始化的操作
      // this.formDialog.name = ''
      // this.formDialog.description = ''
      if (this.isEdit) {
      // this.$options就是vue专门初始化载件 .data().formDialog就是去上面data()里面找到.formDialog里面将其修改为初始化
        this.formDialog = this.$options.data().formDialog
      }
    },
    // 删除功能的axios
    async shanchuDel(id) {
      try {
        const res = await deldataseTting(id)
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除请求成功'
          })
          // 就是说当你在第三页删完最后一条数据时 ,三页就没有数据了就会跳转到前面一页
          if (this.formDialog.length === 1) {
            this.form.page--
            // 且当只有一页的时候,删完还是要在第一页,没有-1页的说法
            if (this.form.page <= 0) {
              this.form.page = 1
            }
          }
          this.getsettingslist()
        }
      } catch (error) {
        console.log('删除失败')
      }
    },
    // 删除功能
    deleteRole(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.shanchuDel(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  // border: 1px solid red;
  ::v-deep .btn-wrap {
    margin: 15px 0;
  }
  .one{
    margin-top: 15px;
  }
  .pagin-wrap {
    margin-top: 15px;

       text-align: right;
  }
}
</style>
